<template>

    <div>
        <el-form :model="form" ref="form">
            <el-row :gutter="24">
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                        <el-form-item label="具体招聘需求" label-position="top"
                            :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                            <div class="progress-bar">
                                <div class="progress"></div>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple">
                        <el-form-item label="简历编号" label-position="top">
                            <el-input placeholder="JL2025-07-100001" style="width: 260px;" disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple">
                        <el-form-item label="所属需求编号" label-position="top">
                            <el-input placeholder="ZP00004" style="width: 260px;" disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple">
                        <el-form-item label="入库时间" label-position="top">
                            <el-input placeholder="2020-05-05" style="width: 260px;" disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                        <el-form-item label="意向信息" label-position="top"
                            :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                            <div class="progress-bar">
                                <div class="progress"></div>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content ep-bg-purple">
                        <el-form-item label="选择岗位" label-position="top">
                            <el-select v-model="JobData" placeholder="选择岗位" style="width: 260px" placement="bottom">
                                <template #label="{ label, value }">

                                    <span style="font-weight: bold">{{ label }}</span>
                                </template>
                                <el-option v-for="item in SelectAPosition" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="12">
                    <div class="grid-content ep-bg-purple">
                        <el-form-item label="应聘类型" label-position="top" required>
                            <el-select v-model="ApplicationType" placeholder="选择类型" style="width: 260px">
                                <template #label="{ label, value }">
                                    <span style="font-weight: bold">{{ label }}</span>
                                </template>
                                <el-option v-for="item in ApplicationTypeData" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                        <el-form-item label="个人信息" label-position="top"
                            :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                            <div class="progress-bar">
                                <div class="progress"></div>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="姓名" label-position="top">
                            <el-input placeholder="结城明日奈" style="width: 260px;" />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="性别" label-position="top" required>
                            <el-select v-model="selectedGender" placeholder="选择性别" style="width: 260px"
                                placement="bottom">
                                <template #label="{ label, value }">
                                    <span style="font-weight: bold">{{ label }}</span>
                                </template>
                                <el-option v-for="item in GenderData" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="民族" label-position="top">
                            <el-input placeholder="汉族" style="width: 260px;" />
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->

                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"> <el-form-item label="籍贯" label-position="top"
                            required>
                            <el-cascader v-model="selectedRegion" :options="regionData" placeholder="请选择地址"
                                style="width: 260px" clearable :teleport="true" />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="户口性质" label-position="top"
                            required>
                            <el-select v-model="selectedHouseholdRegistration" placeholder="选择户口" style="width: 260px"
                                placement="bottom">
                                <template #label="{ label, value }">
                                    <span style="font-weight: bold">{{ label }}</span>
                                </template>
                                <el-option v-for="item in HouseholdRegistrationData" :key="item.value"
                                    :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="政治面貌" label-position="top"
                            required>

                            <el-select v-model="selectedPoliticalStatus" placeholder="选择" style="width: 260px"
                                placement="bottom">
                                <template #label="{ label, value }">
                                    <span style="font-weight: bold">{{ label }}</span>
                                </template>
                                <el-option v-for="item in PoliticalStatusData" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->

                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="手机号码" label-position="top">
                            <el-input placeholder="1008611" style="width: 260px;" />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="邮箱" label-position="top">
                            <el-input placeholder="13k~14k" style="width: 260px;" />

                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="出身年月" label-position="top"
                            required>
                            <el-date-picker v-model="DateOfBirth" type="datetime" placeholder="选择日期时间"
                                format="YYYY/MM/DD HH:mm:ss" style="width: 260px;">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="年龄" label-position="top">
                            <el-input placeholder="21" style="width: 260px;" />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="学历" label-position="top">
                            <el-input placeholder="本科" style="width: 260px;" />

                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="学校" label-position="top">
                            <el-input placeholder="xxx科技大学" style="width: 260px;" />

                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="专业" label-position="top">
                            <el-input placeholder="计算机" style="width: 260px;" />

                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="毕业时间" label-position="top"
                            required>
                            <el-date-picker v-model="GraduationTime" type="datetime" placeholder="选择日期时间"
                                format="YYYY/MM/DD HH:mm:ss" style="width: 260px;">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="婚育情况" label-position="top"
                            required>
                            <el-select v-model="selectedMarriageAndChildbearing" placeholder="" style="width: 260px"
                                placement="bottom">
                                <template #label="{ label, value }">
                                    <span style="font-weight: bold">{{ label }}</span>
                                </template>
                                <el-option v-for="item in MarriageAndChildbearingData" :key="item.value"
                                    :label="item.label" :value="item.value" />
                            </el-select>

                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                        <el-form-item label="工作及实习经历" label-position="top"
                            :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                            <div class="progress-bar">
                                <div class="progress"></div>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light">

                        <el-input clearable style="width: 560px" type="textarea" :autosize="{ minRows: 5, maxRows: 8 }"
                            placeholder="xxxx公司" />

                    </div>
                </el-col>
                <!--  -->
                <el-col :span="12">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="招聘负责人" label-position="top">


                            <el-button size="small" style="width: 260px;" ref="buttonRef"
                                v-click-outside="onClickOutside"><el-icon>
                                    <UserFilled />
                                </el-icon>早濑优香</el-button>
                            <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" title="早濑优香"
                                virtual-triggering>
                                <hr>
                                <span> 部门：人事部 </span><br>
                                <span> 手机:1008611 </span>
                            </el-popover>

                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="简历状态" label-position="top">
                            <el-select v-model="ResumeStatus" placeholder="" style="width: 260px" placement="bottom">
                                <template #label="{ label, value }">
                                    <span style="font-weight: bold">{{ label }}</span>
                                </template>
                                <el-option v-for="item in ResumeStatusData" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>

                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="意见" label-position="top">
                            <el-input clearable style="width: 560px" type="textarea"
                                :autosize="{ minRows: 5, maxRows: 8 }" placeholder="nice" />
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="" label-position="top">
                            <el-tabs v-model="activeName" type="card" style="padding-left: 30px;"
                                @tab-click="handleClick">
                                <!-- 面试信息 -->
                                <el-tab-pane label="面试信息" name="first">
                                    <el-table :data="InterviewInformation" border style="width: 1000px;height: 200px;">

                                        <el-table-column v-for="col in InterviewFormHeader" :prop="col.id" :key="col.id"
                                            :label="col.label" :width="col.width">
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>
                                <!-- Offer信息 -->
                                <el-tab-pane label="Offer信息" name="second"><el-table :data="OfferInformation" border
                                        style="width: 1000px;height: 200px;">
                                        <el-table-column v-for="col in OfferHeader" :prop="col.id" :key="col.id"
                                            :label="col.label" :width="col.width">
                                        </el-table-column>
                                    </el-table></el-tab-pane>
                            </el-tabs>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">
                    保存</el-button>
                <el-button @click="Cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, defineEmits ,defineProps} from 'vue'
import { regionData } from 'element-china-area-data'
import { ElMessage, ElMessageBox } from 'element-plus'

const JobData = ref('')

// 意向岗位
const SelectAPosition = [{
    value: '前端工程师',
    label: '前端工程师'
}, {
    value: '后端工程师',
    label: '后端工程师'

}, {
    value: '测试工程师',
    label: '测试工程师'

}, {
    value: '产品经理',
    label: '产品经理'

}, {
    value: 'UI设计师',
    label: 'UI设计师'

}, {
    value: 'Java程序员',
    label: 'Java程序员'

}, {
    value: 'Python程序员',
    label: 'Python程序员'

}
]


// 地址数据
const selectedRegion = ref([])
const selectedGender = ref('');//性别
//  性别数据
const GenderData = ref([{
    value: '0',
    label: '男'
}, {
    value: '1',
    label: '女'
}]);
const ApplicationType = ref('')//应聘类型
const ApplicationTypeData = ref([{//应聘类型数据
    value: '社招',
    label: '社招'
}, {
    value: '校招',
    label: '校招'
}, {
    value: '实习',
    label: '实习'
}, {
    value: '其他',
    label: '其他'
}])

const selectedHouseholdRegistration = ref('');//户籍
// 户籍数据
const HouseholdRegistrationData = ref([{
    value: '0',
    label: '城镇'
}, {
    value: '1',
    label: '农村'
}]);

const selectedPoliticalStatus = ref('');//政治面貌
// 政治面貌数据
const PoliticalStatusData = ref([{
    value: '0',
    label: '群众'
}, {
    value: '1',
    label: '党员'
}]);

// 出生日期
const DateOfBirth = ref('');
// 毕业时间
const GraduationTime = ref('');

const selectedMarriageAndChildbearing = ref('');//婚姻与生育
// 婚育数据
const MarriageAndChildbearingData = ref([{
    value: '0',
    label: '未婚'
}, {
    value: '1',
    label: '已婚'
}, {
    value: '2',
    label: '离异'
}, {
    value: '3',
    label: '丧偶'
}]);
// 简历状态
const ResumeStatus = ref('');
// 简历状态数据
const ResumeStatusData = ref([{
    value: '0',
    label: '待面试'
}, {
    value: '1',
    label: '待入职'
}, {
    value: '2',
    label: '未通过'
}, {
    value: '3',
    label: '已入职'
}, {
    value: '4',
    label: '其他'
}]);

const activeName = ref('first') // 默认选中
//面试信息表头
const InterviewInformation = ref([
    { id: "1", RequirementID: "zp0001", CandidateID: "JD00001", CandidateName: "结成明日奈", CellPhone: "1008611", RecruiterID: "早濑优香", NumberOfInterviews: "1", ThePlanBegins: '2023-05-01', InterviewEvaluation: "通过" }
])

// 面试信息
const InterviewFormHeader = ref([
    { id: 'RequirementID', label: '需求编号', width: '150px' },
    { id: 'CandidateID', label: '简历编号', width: '150px' },
    { id: '"CandidateName', label: '姓名', width: '150px' },
    { id: 'CellPhone', label: '手机', width: '150px' },
    { id: 'RecruiterID', label: '招聘负责人', width: '150px' },
    { id: 'NumberOfInterviews', label: '面试次数', width: '150px' },
    { id: 'ThePlanBegins', label: '发起时间', width: '150px' },
    { id: 'InterviewEvaluation', label: '面试评价', width: '150px' },
])

const OfferHeader = ref([
    { id: 'offerID', label: '招聘负责人', width: '150px' },
    { id: 'offerID1', label: '发放时间', width: '150px' },
    { id: 'offerID2', label: 'offer状态', width: '150px' },
    { id: 'offerID3', label: '所属需求编号', width: '150px' },
    { id: 'offerID4', label: '简历编号', width: '150px' },
    { id: 'offerID5', label: '候选人姓名', width: '150px' },
    { id: 'offerID6', label: 'offer岗位', width: '150px' },
    { id: 'offerID7', label: '入职部门', width: '150px' }
])

const OfferInformation = ref([
    { id: 1, offerID: '开' }
])
const form = ref()

const emitt = defineEmits(['reF-table'])
// 退出提示
const Cancel = () => {
    ElMessageBox.confirm(
        '你有正在编辑的数据，确定离开？',
        '注意',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '取消操作',
            })
        })
};

// 保存
const onSubmit = () => {

    ElMessage({ type: 'success', message: '保存成功' })
    emitt('reF-table')
};
</script>
<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}
</style>
